<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex 导航条</title>
    <style>
        * {
            outline: 1px #ccc solid;
            margin: 10px;
            padding: 10px;
            
        }

        body,
        nav,
        main,
        article {
            display: flex;
        }

        body,
        article {
            flex-direction: column;
        }
    </style>
</head>

<body>
    <header>
        <h1>页面标题!</h1>
    </header>
    <nav>
        <a href="/">首页</a>
        <a href="/about">关于</a>
        <a href="/blog">博客</a>
        <a href="/jobs">工作</a>
        <a href="/contact">联系我们</a>
    </nav>
    <main>
        <article>
            <img alt="" src="img1.jpg">
            <p>This is some awesome content that is on the page.</p>
            <button>Go Somewhere</button>
        </article>
        <article>
            <img alt="" src="img2.jpg">
            <p>This is more content than the previous box, but less than the next.</p>
            <button>Click Me</button>
        </article>
        <article>
            <img alt="" src="img3.jpg">
            <p>We have lots of content here to show that content can grow, and everything can be the same size if you use flexbox.</p>
            <button>Do Something</button>
        </article>
    </main>
    <footer>Copyright &#169; 2018</footer>
</body>


</html>